<template>
	<div>
		<div class="demo-input-size">


			<el-input v-model="searchvalue" @change="seachFn()" class="w-50 m-2 seachinput"
				placeholder="请输入商品编码或商品名称或盘点人" />
			<el-button type="primary" @click="seachFn()">查询</el-button>
			<el-button type="success" @click="cleanFn()">清除</el-button>

		</div>
		<div class="sale">
			<div class="top_button">
				<div class="partition"></div>
			</div>

			<el-table :data="showsale" style="width: 100%" max-height="79vh" border v-loading="isres"
				element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)">

				<el-table-column type="index" width="50" label="序号"></el-table-column>
				<el-table-column v-for="(col, i) in cols2" :key="i" :prop="col.value" :label="col.name"
					sortable></el-table-column>
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
						<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog v-model="EditFormVisible" title="Shipping address">
				<el-form :model="EditForm">
					<el-form-item label="盘点人" label-width="120">

						<el-input v-model="EditForm.user1" autocomplete="off" placeholder="盘点人" readonly />
					</el-form-item>
					<el-form-item label="产&nbsp;&nbsp;&nbsp;品" label-width="120">

						<el-input v-model="EditForm.pn" autocomplete="off" placeholder="产品" readonly />
					</el-form-item>
					<el-form-item label="生产日" label-width="120">
						<el-input v-model="EditForm.procreate" autocomplete="off" placeholder="修改生产日" />
					</el-form-item>
					<el-form-item label="到期日" label-width="120">
						<el-input v-model="EditForm.dqr_dd" autocomplete="off" placeholder="修改到期日" />
					</el-form-item>
					<el-form-item label="数&nbsp;&nbsp;&nbsp;量" label-width="120">
						<el-input v-model="EditForm.pd" autocomplete="off" placeholder="修改数量" />
					</el-form-item>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="EditFormVisible = false">关闭</el-button>
						<el-button type="primary" @click="EditFormChangeFn(EditForm)">
							确定
						</el-button>
					</span>
				</template>
			</el-dialog>
		</div>
		<div class="demo-pagination-block" :class="{ visibilityclass: isActive }">

			<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="pageSizes"
				:small="small" :disabled="disabled" :background="background"
				layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</div>
		<tool :multipleTable="sale"></tool>
	</div>
</template>
<script>
import { reactive, toRefs, ref, nextTick } from "vue";
import { updqr } from "@/api/pandian";
import { Inventory } from "@/api/pandian";
import { ElMessage } from "element-plus";

import tool from "./components/tool";



export default {
	components: {
		tool,
	},
	setup() {
		let small = ref(false)
		let background = ref(false)
		let disabled = ref(false)
		let currentPage4 = ref(1)
		let pageSize4 = ref(100)
		let searchvalue = ref()
		let total = ref(0)
		let pageSizes = ref([100, 200, 300, 400])
		let isActive = ref(false)
		const data = reactive({
			cols: [],
			cols2: [{ name: 'ID', value: 'id' }, { name: '仓库', value: 'ck' }, { name: 'hj', value: 'hj' },
			{ name: 'kw', value: 'kw' }, { name: '盘点人', value: 'user1' }, { name: '商品编码', value: 'pc' },
			{ name: '商品名称', value: 'pn' }, { name: '条形码', value: 'barcode' }, { name: '有效期', value: 'dqr_dd' },
			{ name: '保质期', value: 'dqr' }, { name: '盘点数', value: 'pd' }, { name: '盘点时间', value: 'pdtime' }
				, { name: '箱规', value: 'probox' }, { name: 'universal', value: 'universal' }, { name: '生产日期', value: 'procreate' },],
			sale: [],
			showsale: [],
			isres: false,
			EditFormVisible: false,
			EditForm: {}

		});
		const loaded = async () => {
			data.isres = true;

			const result = await Inventory.get();
			// result.data = JSON.parse(result.data);
			data.isres = false;
			if (result.data.length == 0) {
				data.sale = [];
				ElMessage.success({
					message: "还没有盘呢",
					type: "success",
				});
			} else {
				data.sale = result.data.filter((item) => item.ck == '大仓');

				total.value = data.sale.length

				data.showsale = data.sale.slice((currentPage4.value - 1) * pageSize4.value, pageSize4.value * currentPage4.value)


			}
		};
		loaded();
		const handleSizeChange = (val) => {

			pageSize4.value = val
			loaded();
		}
		const handleCurrentChange = (val) => {

			currentPage4.value = val
			loaded();
		}

		const handleEdit = (index, row) => {

			data.EditForm = row
			data.EditFormVisible = true

			console.log(index, row)
		}
		const handleDelete = (index, row) => {
			console.log(index, row)
		}
		const EditFormChangeFn = (val) => {
			preservation(val.id, val.pd, val.dqr_dd, val.procreate)
			data.EditFormVisible = false
			loaded()

		}
		const seachFn = () => {

			if (searchvalue.value) {
				console.log(isActive.value);
				nextTick(() => {
					isActive.value = true
				})
				console.log(searchvalue.value);
				data.showsale = []
				// const existingitem=[]
				data.sale.filter((item) => {
					if (item.pc.split(searchvalue.value).length > 1 || item.pn.split(searchvalue.value).length > 1 || item.user1.split(searchvalue.value).length > 1) {
						data.showsale.push(item)
					}
					// console.log(data.showsale);
					isActive.value = false
					return data.showsale
				})
			} else {
				if (data.showsale.length > 1000) {
					return
				} else {
					nextTick(() => {
						isActive.value = false
						loaded();

					})



				}

			}

			// data.sale.filter()

		}
		const cleanFn = () => {
			searchvalue.value = ''
			seachFn()
		}
		const preservation = async (id, newnum, newdqr, newprocreate) => {
			console.log('post', id, newnum, newdqr, newprocreate);
			const result = await updqr.post({
				id,
				upnum: newnum,
				updqr: newdqr,
				upprocreate: newprocreate
			});
			if (result.code == 200) {
				ElMessage.success({
					message: "恭喜你，这是一条成功消息",
					type: "success",
				});
				loaded();
			} else {
				ElMessage.success({
					showClose: true,
					message: "错了哦，这是一条错误消息",
					type: "error",
				});
			}
		};
		return { ...toRefs(data), pageSizes, cleanFn, isActive, small, searchvalue, background, disabled, handleDelete, seachFn, handleEdit, preservation, pageSize4, currentPage4, EditFormChangeFn, total, handleSizeChange, handleCurrentChange };
	},
};
</script>
<style scoped>
.demo-pagination-block {
	z-index: 500;
	position: fixed;
	bottom: 0;
	width: 30%;

}

.seachinput {
	margin: 10px;
	width: 32% !important;
}

.visibilityclass {
	visibility: hidden
}
</style>